<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>邮件发送列表</title>
		<style>
		    .flex{
		        display:flex;
		    }
		    .flex .item{
		        flex: 1;
		    }
		</style>
	</head>
	<body>
	    <input type="email" name="email" id="email" value="" placeholder="邮箱" />
	    <button id="add">添加</button>
	    <button id="send">发送</button>
	    <button id="stop">暂停</button>
	    <div class="flex">
	        <div id="tip" class="item"></div>
	        <div id="progress" class="item">发送总计<span id="total">0</span></div>
	    </div>
	    
	    
	    <div class="flex">
    	    <dl id="list" class="item">
    	        <dt>待发送邮箱</dt>
    	        <!--<dd>417459665@qq.com</dd>-->
    	    </dl>
    	    
    	    <dl id="listAll" class="item">
    	        <dt>已送邮箱</dt>
    	    </dl>
	    </div>
	    
	    <script type="text/javascript" src="../../static/lib/jquery.min.js" ></script>
	    <script>
	        /*
	         轮询发送数据
	         * */
	        var STATUS = {
	            0:'等待',
	            1:'成功',
	            2:'失败'
	        };
	        var list = [],
                _list = {},
                timer,
                listTimer,
                listTimeLimit = 5000,
                $list = $("#list"),
                $listAll = $("#listAll"),
                $tip = $("#tip"),
                $email = $("#email"),
                $total = $("#total");
                
	        
	        // 列表追加数据
	        $("#add").click(function(){
	            var email = $email.val();
	            _list[email] = Object.keys(_list).length;
	            list.push(email);
	            $list.append('<dd>'+email+'</dd>');
	            $tip.html('');
	        });
	        
	        //点击发送
	        $("#send").click(function(){
	            $tip.html('');
	            
                timer = setInterval(function(){
                    var len = $list.find("dd").length;// 列表数
                    if(len){
                        send(list); // 发送
                        console.log(_list);
                    }
                }, 2000);
                
            });
            
            //暂停
            $("#stop").click(function(){
                $tip.html('');
                if(timer) clearInterval(timer);
            });
	        
	        //发送请求
	        function send(items){
	            $.ajax({
	            	type:"post",
	            	url:"list_add.php",
	            	data:{email:items.join(',')},
	            	dataType:'json',
	            	success:function(res){
	            	    console.log(res.code);
	            	    if(timer) clearInterval(timer);
	            	    if(res.code){
	            	        $tip.html('发送成功');
	            	        if(res.data.total){
	            	            $total.html(res.data.total);
	            	            // 实时获取邮件列表
	            	            getListRun();
	            	        }else{
	            	            if(listTimer) clearInterval(listTimer);
	            	        }
	            	    }else{
	            	        $tip.html(res.msg);
	            	    }
	            	}
	            });
	        }
	        
	        function getList(){
	            $.ajax({
                    type:"get",
                    url:"list.php",
                    dataType:'json',
                    success:function(res){
                        console.log(res);
                        if(res.code && res.data){
                            var html = [];
                            var rows = res.data;
                            $listAll.find('dd').remove();//删除所有dd，然后再覆盖新的
                        
                            for (var i=0;i<rows.length;i++) {
                                var row = rows[i];
                                [
                                    '<dd class="flex">',
                                        '<span class="item">',
                                        i+1, '-',row.email, '-', STATUS[row.status],
                                
                                    '</dd>'
                                ];
                            	html.push(['<dd class="flex">', i+1, '-',row.email, '-', STATUS[row.status], '</dd>'].join(''));
                            }
                            
                            $listAll.append(html.join(''));
                        }else{
                            if(listTimer) clearInterval(listTimer);
                        }
                    }
                });
	        }
	        
	        function getListRun(){
	            if(listTimer) clearInterval(listTimer);
	            getList();
	            listTimer = setTimeout(getList, listTimeLimit);
	        }
	        
	        $(function(){
	            getListRun();
	        });
	    </script>
	</body>
</html>
